<template>
  <transition name="slide-fade">
  <div style="height: 100%">
    <img src="../assets/imgs/indexBg1.jpg" alt="">
    <img src="../assets/imgs/front.png" alt="" style="display: none">
    <img src="../assets/imgs/back.png" alt="" style="display: none">
    <el-container>
      <el-header>房间号
        <span style="color: gold">{{room_id}}</span>
        <!--<div class="quitBtn" @click="quit_room()">-->
          <!--◀ &nbsp;离开房间-->
        <!--</div>-->
      </el-header>
      <div class="players">
          <!--<div style="position: relative;">-->
            <!--<div class="houseOwner">-->
              <!--<img src="../assets/imgs/bg.png" alt="">-->
            <!--</div>-->
            <!--<div class="houseOwnerMark">-->
              <!--<img src="../assets/imgs/king.png" alt="">-->
            <!--</div>-->
          <!--</div>-->
          <div class="hasplayer" v-for="(player,index) in playInfo">
            <img :src="player.head_img" alt="">
            <div  v-if="index==0"  class="mark" style="background: #ff0;color: brown">房东</div>
            <div  v-if="index!=0"  class="mark">已准备</div>
          </div>
          <!--<div class="addpalyer">-->
            <!--+-->
          <!--</div>-->
      </div>
      <div class="startBtn" v-if="player_id==1">
        <el-button class="el-button el-button--success" @click="toPage('show')">
          开始游戏
        </el-button>
      </div>
      <div class="startBtn" v-if="player_id!=1">
        等待房主确认开始 - - -
      </div>
      <div class="bottomText">
        点击右上角分享给（旁边的）好友加入房间
      </div>
    </el-container>
  </div>
  </transition>
</template>

<script>
  import wx from 'weixin-js-sdk'
  export default {
    name: 'gameHome',
    data:()=>({
      room_id:'',
      pwd:'',
      player_id:'1',
      playInfo:[],
      loop:function () {

      },
      strat:function () {

      }
    }),
    methods: {
      toPage (page) {
        this.$axios.post(this.urlList.authUrl + '/api/game/start_game',{room_id:this.room_id})
          .then((res)=>{
            if(res.data.error == 200){
              this.$router.push({name: page,params:{room_id:this.room_id,player_id:this.player_id}})
            }else{
              alert('为了游戏体验，' + res.data.message)
            }
          })

      },
      doShare(){
        this.$axios.post(this.urlList.authUrl + '/api/game/get_wx_config',{
          url: location.href.split('#')[0]
        }).then((res)=>{
          if(res.data.error == 200){
            wx.config({
              debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              appId: res.data.data.appid, // 必填，企业号的唯一标识，此处填写企业号corpid
              timestamp: res.data.data.time, // 必填，生成签名的时间戳
              nonceStr: res.data.data.noncestr, // 必填，生成签名的随机串
              signature: res.data.data.signature, // 必填，签名，见附录1
              jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            })
            let shareData = {
              title:'谁才是那个卧底？看谁才是戏精',
              desc:'当前无聊，让我们一起玩个游戏吧，你的演技是否是最强的呢，别让我抓到你哦',
              link:this.urlList.webUrl + '?room_id=' + this.room_id + '&pwd=' + this.pwd,
              imgUrl:this.urlList.webUrl + '/static/img/settingBG.8cdc434.png'
            }
            wx.ready(function () {
              wx.onMenuShareTimeline(shareData)
              wx.onMenuShareAppMessage(shareData)
            })
          }
        })
      },
      getUserInfo(){
        this.$axios.post(this.urlList.authUrl + '/api/game/get_room_info',{
          room_id:this.room_id
        }).then((res)=>{
          this.playInfo = res.data.data.member
        })
      },
      IsStart(){
        this.$axios.post(this.urlList.authUrl + '/api/game/get_room_status',{
          room_id:this.room_id
        }).then((res)=>{
          if(res.data.data.start){
            this.$router.push({name:'show',params:{room_id:this.room_id,player_id:this.player_id}})
          }
        })
      },
      quit_room(){
        this.$axios.post(this.urlList.authUrl + '/api/game/quit_room',{
          token:window.localStorage.getItem('token'),
          room_id:this.room_id,
          player_id:this.player_id
        }).then((res)=>{
          if(res.data.error == 200){
            alert('您已经离开了'+ this.room_id +'号房间')
            window.localStorage.removeItem('player_id')
            window.localStorage.removeItem('room_id')

            this.$router.replace({name:'index'})
          }
        })
      }
    },
    beforeCreate(){

    },
    mounted(){


    },
    created(){
      this.doShare()
      window.localStorage.removeItem('code')
      this.player_id = this.$route.params.player_id || 1;
      this.pwd = this.$route.params.pwd || window.localStorage.getItem('pwd')
      window.localStorage.setItem('pwd',this.pwd)
      window.localStorage.setItem('player_id',this.player_id)
      this.loop = setInterval(this.getUserInfo,1000);
      if(this.player_id != 1){
        this.start = setInterval(this.IsStart,1000);
      }
      if(this.$route.params.room_id){
        this.room_id = this.$route.params.room_id
        window.localStorage.setItem('room_id',this.room_id)
        this.getUserInfo()
        setTimeout(this.loop,1000)
      }else{
        if(window.localStorage.getItem('room_id')){
          this.room_id = window.localStorage.getItem('room_id')
          this.getUserInfo()
        }else{
          alert('您的房间找不到了。。')
          history.go(-1)
        }
      }
    },
    //离开当前页面后执行
    destroyed: function () {
      window.localStorage.removeItem('pwd')
      clearInterval(this.loop)
      clearInterval(this.start)
    },
  }
</script>

<style scoped>
  .el-container{
    width: 100%;
    position: absolute;
    top: 0;
  }
  .el-header {
    background:url('../assets/imgs/topBG.jpg') no-repeat;
    background-size:cover;
    background-position:bottom right;
    color: #fff;
    text-align: center;
    line-height: 60px;
  }
  .players{
    padding: 0 10px;
    margin: 10px 0;
    display: flex;
    flex-wrap:wrap
  }

  .hasplayer{
    width: 60px;
    height: 60px;
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #67C23A;
    margin:10px calc((25% - 68px)/2);
  }
  .addpalyer{
    position: relative;
    background: url("../assets/imgs/settingBG.png") 100% 100% no-repeat;
    background-size: 100% 100%;
    width: 60px;
    height: 60px;
    font-size: 40px;
    line-height: 60px;
    color: #fff;
    border: 4px solid #ccc;
    border-radius: 50%;
    text-align: center;
    margin:10px calc((25% - 68px)/2);
  }
  img{
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .quitBtn{
    position: absolute;
    top: 0;
    color:red;
    font-size: 12px;
    margin-left: 10px;
    left: 0;
  }
  .mark{
    background: #67C23A;
    color: #fff;
    height: 20px;
    position: absolute;
    text-align: center;
    bottom: 10px;
    line-height: 20px;
    z-index: 22;
    width: 100%;
  }
  .startBtn{
    width: 100%;

    margin-top: 160px;
    color: #dfe4ed;
    text-align: center;
  }
  .transition-box {
    margin: auto;
    margin-bottom: 10px;
    width: 200px;
    border-radius: 4px;
    background-color: #409EFF;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
  }
  .el-button--success{
    font-weight: bold;
  }
  .bottomText{
    color: #999;
    font-size: 12px;
    text-align: center;
    margin-top: 20px;
  }
</style>
